import router from '@/router'
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'
import store from '@/store'
// 导入 动态路由
import { asyncRoutes } from '@/router'

const whiteList = ['/login', '/404'] // 白名单: 不需要 token也能访问的页面
// 路由前置守卫
router.beforeEach(async(to, from, next) => {
  // 开启进度条
  nprogress.start()
  // 如果有 token, 区分是不是去登录页, 是去登录页就拦截
  if (store.getters.token) {
    // 如果去的是 login 页 拦截到主页 并关闭进度条
    if (to.path === '/login') {
      next('/')
      nprogress.done()
    } else {
      // 跳转, 调用 actions 调用接口获取用户信息 存入 store
      // 如果没有用户信息, 就调用接口获取
      if (!store.getters.userId) {
        // 解构出 res 的 roles
        const { roles } = await store.dispatch('user/getUserInfoAction')
        // console.log(roles.menus) // 用户拥有的权限数组 不确定 可能是 0- 8个
        // console.log(asyncRoutes) // 动态路由 一共有八个
        // 根据 用户拥有的权限数组 筛选出 动态路由
        // filter 返回 一个 布尔值 , 为 true 加到 新数组里
        const filterRoutes = asyncRoutes.filter(item => roles.menus.includes(item.name))
        // 添加动态路由信息到路由表, 用实例对象 router的一个addRoute方法
        // 把 404 放到最后
        router.addRoutes([...filterRoutes, { path: '*', redirect: '/404', hidden: true }])
        // 然后调用 store 里面的 setRoutes 重新设置路由
        store.commit('user/setRoutes', filterRoutes)
        // 添加路由后, 还需要转发一下, 目的是让路由拥有信息  这是 router 的已知缺陷
        next(to.path)
      } else {
      // 有 token, 但是去的不是 login页, 直接放行
        next()
      }
    }
  } else {
    // 如果没有 token, 区分在不在白名单内, 在白名单内就直接放行
    if (whiteList.includes(to.path)) {
      next()
    } else {
      // 没有token, 也不在白名单内, 拦截到登录, 关闭进度条
      next('/login')
      nprogress.done()
      // 注意: 凡是要拦截的, 都需要再写一次关闭进度条
    }
  }
})
// 路由后置守卫
router.afterEach(() => {
  // 关闭进度条
  nprogress.done()
})
